<template>
    <div>
        <el-dialog title="订单改价记录" :visible.sync="dialogVisible" width="700px">
            <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(item, index) in orderDatalist" :key="index" :timestamp="item.createTime" placement="top">
                    <el-table :data="item.list" >
                        <el-table-column prop="date" label="商品" align="center">
                            <template slot-scope="scope">{{ scope.row.productName }}</template>
                        </el-table-column>
                        <el-table-column prop="payNum" label="数量" align="center">
                        </el-table-column>
                        <el-table-column prop="price" label="单价" align="center">
                        </el-table-column>
                        <el-table-column prop="price" label="合计" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.payNum * scope.row.price }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px;">
                        <h1>总计：{{ caluateAll(item.list) }}</h1>
                    </div>
                </el-timeline-item>
            </el-timeline>
            <el-empty v-if="orderDatalist.length == 0" description="没有修改记录"></el-empty>
        </el-dialog>

    </div>
</template>

<script>
import { orderDetailApi, getLogisticsInfoApi, orderDetailRecordApi } from '@/api/order'

export default {
    name: 'OrderDetail',
    props: {
        orderId: {
            type: String,
            default: 0
        }
    },
    data() {
        return {
            reverse: false,
            dialogVisible: false,
            orderDatalist: null,
            loading: false,
            modal2: false,
            result: []
        }
    },
    mounted() {
    },
    methods: {
        caluateAll(list){
            let all = 0;
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                all += element.price * element.payNum;
            }
            return all;
        },
        openLogistics() {
            this.getOrderData()
            this.modal2 = true;
        },
        // 获取订单物流信息
        getOrderData() {
            getLogisticsInfoApi({ orderNo: this.orderId }).then(async res => {
                this.result = res.list;
            })
        },
        getDetail(row) {
            this.dialogVisible = true
            this.loading = true

            orderDetailRecordApi({ id: row.id }).then(res => {
                this.orderDatalist = res
                this.loading = false
            }).catch(() => {
                this.orderDatalist = null
                this.loading = false
            })
        }
    }
}
</script>

<style scoped lang="scss">
.logistics {
    align-items: center;
    padding: 10px 0px;

    .logistics_img {
        width: 45px;
        height: 45px;
        margin-right: 12px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .logistics_cent {
        span {
            display: block;
            font-size: 12px;
        }
    }
}

.trees-coadd {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;

    .scollhide {
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: 18px;
        padding: 10px 0 10px 0;
        box-sizing: border-box;

        .content {
            font-size: 12px;
        }

        .time {
            font-size: 12px;
            color: #2d8cf0;
        }

    }
}

.title {
    margin-bottom: 14px;
    color: #303133;
    font-weight: 500;
    font-size: 14px;
}

.description {
    &-term {
        display: table-cell;
        padding-bottom: 5px;
        line-height: 20px;
        width: 50%;
        font-size: 12px;
        color: #606266;
    }

    ::v-deep .el-divider--horizontal {
        margin: 12px 0 !important;
    }
}
</style>
